<template>
  <el-dialog
    title="更新专题内容"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body>
    <div class="mod-config" v-loading="dataListLoading">
      <el-divider>[{{typeName}}-专题内容管理-{{this.albumInfo.name}}]</el-divider>
      <p style="text-align: center; margin: 20px 0 20px">[我在人间贩卖黄昏,只为收集世间温柔去见你]</p>
      <div style="text-align: center">
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="selectedData"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['所有数据', '已选数据']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="tableData">
          <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
          <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
          <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
        </el-transfer>
        <div class="modal-footer text-center">
          <el-button type="primary" @click="updateHandler()">确 定</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'album-product-update',
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 6; i++) {
        data.push({
          key: i,
          label: `备选项 ${ i }`,
          disabled: i % 3 === 0
        });
      }
      return data;
    };
    return {
      visible: false,
      typeName: 1,
      albumInfo: null,
      tableData: generateData(),
      selectedData: [],
      //真实数据：
      dataList: [],
      pageIndex: 1,
      pageSize: 1000,
      totalPage: 0,
      dataListLoading: false,
    };
  },
  activated () {

  },

  methods: {
    init (id) {
      console.log("album-product-update:" + id)
      this.visible = true
      this.$nextTick(() => {
        if (id) {
          this.$http({
            url: this.$http.adornUrl(`/sys/album/info/${id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.albumInfo = data.album
              let url = '/sys/album-product/themeList'
              if (this.albumInfo.type === 1){
                this.typeName = "主题"
                url = '/sys/album-product/themeList'
              }
              if (this.albumInfo.type === 2){
                this.typeName = "组件"
                url = '/sys/album-product/widgeList'
              }
              if (this.albumInfo.type === 3){
                this.typeName = "壁纸"
                url = '/sys/album-product/wallpaperList'
              }
              this.getDataList(url)
              this.getSelectedDataList(id)
            }
          })
        }
      })
    },
    // 获取主题数据列表
    getDataList (url) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          const newData = [];
          this.dataList.forEach((item)=>{
            newData.push({
              key: item.id,
              label: item.name,
              disabled: false
            });
          });
          this.tableData = newData
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    },
    // 获取主题数据列表
    getSelectedDataList (id) {
      this.$http({
        url: this.$http.adornUrl('/sys/album-product/selectedList'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'albumId':  id,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          const dataListTemp = data.page.list
          const selectedDataTemp = [];
          dataListTemp.forEach((item)=>{
            selectedDataTemp.push(item.objectId);
          });
          this.selectedData = selectedDataTemp
        }
      })
    },
    handleChange(value, direction, movedKeys) {
      console.log("method:handleChange;");
      console.log(value, direction, movedKeys);
    },
    updateHandler() {
      console.log("method:updateHandler;");
      this.$confirm(`确定要修改操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/album-product/update'),
          method: 'post',
          data: this.$http.adornData(this.selectedData, false),
          params: this.$http.adornParams({
            'albumId': this.albumInfo.id
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
                //this.getDataList()
                //this.getSelectedDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
  }
};
</script>

<style>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.el-transfer-panel{
  width:350px!important;
  height:500px!important;
}
.el-transfer-panel__list.is-filterable{
  height: 400px;
}
</style>
